<template>
  <Container class="single-sale">
    <div slot="header" class="container-header title title-center">满赠促销</div>
    <div class="bg-light">
      <div class="container-title">
        <span>促销规则</span>
        <Button type="primary" @click="onJoinback">修改促销</Button>
      </div>
      <Form ref="form" :label-width="100">
        <Row>
          <i-col span="8">
            <FormItem label="促销名称：">{{ $store.state.fullGiftSale.form.name }}</FormItem>
            <FormItem label="使用期限：">{{ $store.state.fullGiftSale.form.date[0] | dateTime }} - {{ $store.state.fullGiftSale.form.date[1] | dateTime }}</FormItem>
            <FormItem label="活动备注：">{{ $store.state.fullGiftSale.form.remarks }}</FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="促销类型：">{{ fullGiftSelecterm }}</FormItem>
            <FormItem label="活动规则： ">
              <div v-show="$store.state.fullGiftSale.form.term == 1" class="flexalign-center">
                <ul><li v-for="(item,index) in $store.state.fullGiftSale.form.discountGift" v-show="item.value" :key="index">满{{ item.value }}元</li></ul>
              </div>
              <div v-show="$store.state.fullGiftSale.form.term == 2" class="flexalign-center">
                <ul><li v-for="(item,index) in $store.state.fullGiftSale.form.discount1" v-show="item.value" :key="index">满{{ item.value }}元</li></ul>
                <ul><li v-for="(item,index) in $store.state.fullGiftSale.form.discount2" v-show="item.value" :key="index">加{{ item.value }}元</li></ul>
              </div>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="促销对象：">{{ fullGiftSelectgrade }}</FormItem>
          </i-col>
        </Row>
      </Form>
    </div>
    <div class="bg-light mt">
      <div class="container-header">
        <SearchSale @onSearchData="onSearchData" />
      </div>
      <Tabs v-model="tab">
        <Button v-if="tab === 'tab1'" slot="extra" class="item" type="primary" icon="md-add" @click="onJoinAdd">批量加入</Button>
        <Button v-if="tab === 'tab2'" slot="extra" class="item" type="primary" icon="md-add" @click="onJoinDelete">批量撤出</Button>
        <TabPane label="选择主商品" name="tab1">
          <choiceCommidy ref="choiceCommidy" />
        </TabPane>
        <TabPane :label="label1" name="tab2">
          <mainCommidy ref="mainCommidy" />
        </TabPane>
      </Tabs>
    </div>
    <div slot="footer" class="container-footer bg-white">
      <Button size="large" @click="jumpPrevPage">返回</Button>
      <Button type="primary" size="large" class="ml" @click="onClickNext">下一步</Button>
    </div>
  </Container>
</template>
<script>
import choiceCommidy from './list/choiceCommidy.vue'
import mainCommidy from './list/mainCommidy.vue'
import SearchSale from '@/views/sales/common/SearchSale'
export default {
  components: {
    choiceCommidy,
    mainCommidy,
    SearchSale
  },
  props: {
    form: {
      type: Object
    }
  },
  data () {
    return {
      id: this.$route.query.id || '',
      type: this.$route.query.type || '',
      tab: 'tab1',
      ChoiceGifts: 'ChoiceGifts1',
      gift: 'gift1',
      searchForm: {
        brandId: [],
        categoryId: '',
        keyword: '',
        code: '',
        skuCode: ''
      },
      gradeList: [],
      brandList: [],
      rule: {
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入商品编码', trigger: 'blur' }],
        sku: [{ required: true, message: '请输入SKU编码', trigger: 'blur' }]
      },
      setForm: {
        type: '1',
        discountNum: 5,
        subNum: 0,
        saleNum: 0
      },
      label1: (h) => {
        return h('div', [
          h('span', '已选主商品'),
          h('Badge', {
            props: {
              count: this.getSaleNum
            }
          })
        ])
      }
    }
  },
  computed: {
    getSaleNum () {
      return this.$store.getters.getFullGiftSaleNum
    },
    fullGiftSelecterm () {
      return this.$store.getters.fullGiftSelecterm
    },
    fullGiftSelectgrade () {
      return this.$store.getters.fullGiftSelectgrade
    }
  },
  mounted () {
    if (this.id && !this.$store.state.fullGiftSale.GetsaleData.length) this.getData()
  },
  methods: {
    getData () {
      this.$ajaxGet(`/activity/activity_sku_list/${this.id}`).then(data => {
        this.$store.state.fullGiftSale.GetsaleData = (data || []).map(item => {
          return {
            id: item.item[0].productId,
            checked: false,
            buttonChecked: false,
            showChildren: false,
            sale: '',
            limitQuantity: '',
            code: item.productSn,
            salePrice: '',
            reduce: '',
            stock: '',
            isShelf: item.isShelf,
            discount: '',
            title: item.title,
            quantity: item.quantity,
            returnPrice: '',
            productSkuList: item.item.map(todo => {
              return {
                id: todo.skuId,
                productId: todo.productId,
                productSn: todo.productSn,
                parentcode: item.productSn,
                checked: false,
                buttonChecked: false,
                showChildren: false,
                limitQuantity: '',
                code: todo.skuSn,
                salePrice: todo.productSkuInfo.salePrice,
                reduce: '',
                sale: todo.promotionPrice,
                isShelf: todo.isShelf,
                discount: '',
                title: '',
                stock: todo.productSkuInfo.stock,
                returnPrice: '',
                quantity: item.quantity
              }
            })
          }
        })
        this.onSearchData()
      })
    },
    jumpPrevPage () {
      this.$router.back()
    },
    onSearchData (param) {
      this.$refs.choiceCommidy.getProductData(param)
    },
    onClickNext () {
      let url = { name: 'sales/fullGiftSale/list', query: {} }
      if (this.getSaleNum) {
        if (this.id) {
          url.query.id = this.id
          if (this.type) url.query.type = this.type
        }
        this.$router.push(url)
      } else {
        this.$Message.success('请选择商品')
      }
    },
    onJoinback () {
      this.$router.back()
    },
    onJoinAdd () {
      this.$refs.choiceCommidy.getSaleData('checked')
    },
    onJoinDelete () {
      this.$refs.mainCommidy.deleteSaleData()
    }
  }
}
</script>
